<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽使用自己的数据</title>
    <script src="../../js/common/vue/vue.js"></script>
</head>
<body>
子组件可以直接获取到父组件中的数据，但是要获取子组件本身的数据需要通过动态绑定的形式<br>
第一步：在插槽定义时将数据用一个变量绑定<br>
第二步：如果要使用这个变量必须要加"template"标签，在vue2.5以前的版本必须加，后面不用加了，但是为了兼容低版本尽量加上。<br>
<!--     :childData="array" 将组件中的数据绑定到变量 childData错 上  data_a对 为什么不能使用驼峰命名呢？ --><br>

v-slot的出现是为了代替原有的slot和slot-scope<br>
简化了一些复杂的语法。<br>
一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。<br>
------------------------------------------------
<div id="app">
    <cpn>
        <template slot-scope="slot">
            <ul>
                <li v-for="item in slot.child_data">
                    {{item}}
                </li>
            </ul>
        </template>
    </cpn>
    <cpn2>
<!--      一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射  -->
        <template v-slot:footer="message">
            <ul>
                <li v-for="item in message.bb">
                    {{item}}
                </li>
            </ul>
        </template>

    </cpn2>
</div>

<template id="cpn">
    <div>
        <h2>我是子组件</h2>
        <!--     :childData="array" 将组件中的数据绑定到变量 childData 上  data_a为什么不能使用驼峰命名呢？ -->
        <slot :child_data="myArray">
            <ul>
                <li v-for="item in myArray">{{item}}</li>
            </ul>
            </slot>
    </div>
</template>

<template id="cpn2">
    <div>
        <h2>我是子组件</h2>
        <!--     :childData="array" 将组件中的数据绑定到变量 childData 上  data_a为什么不能使用驼峰命名呢？ -->
        <slot name='footer' :bb="aa">

        </slot>
    </div>
</template>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'vue实例'
        },
        components: {

            cpn: {
                template: '#cpn',
                data() {
                    return{
                        myArray:['a','b','c','d','e']

                    }
                }
            },
            cpn2: {
                template: '#cpn2',
                data() {
                    return{
                        aa:['aq','bq','cq','dq','eq']
                    }
                }
            }
        }
    })
</script>
</body>
</html>